<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容" v-show="isshow==0" @focus="change"></el-input>
    <el-form class="bigbox" v-show="isshow==1" ref="editRef" label-width="80px" label-position="top">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-form-item>
            <el-select v-model="value" size="small" placeholder="选择跟进方式" style="width: 100%">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-date-picker
              v-model="value1"
              type="date"
              size="small"
              style="width: 100%"
              placeholder="下次联系时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="inputDeep">
        <el-col :span="24">
          <el-form-item>
            <el-input type="textarea" size="small" :autosize="{ minRows: 3}" placeholder="请输入内容"
                      v-model="textarea1"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <div style="margin-bottom: 12px;float:left;">
          <el-button class="el-icon-picture" size="mini">图片</el-button>
          <el-button class="el-icon-upload" size="mini">附件</el-button>
        </div>
        <div style="display: inline;float:right;">
          <el-button size="mini" type="primary">发布</el-button>
          <el-button size="mini" type="danger" @click="close">取消</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Comment',
  data() {
    return {
      isshow: 0,
      input: '',
      textarea1: '',
      value: '',
      value1: '',//日期选择器值
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  methods: {
    change() {
      this.isshow = 1
    },
    close() {
      this.isshow = 0
    }
  },
  mounted() {

  }
}
</script>
<style scoped lang="scss">
.bigbox {
  border: 1px solid rgb(220, 223, 230);
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  padding: 12px;
  animation: anima 1s;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
  .first_span {
    margin-bottom: 20px;
  }

  .myselect {
    display: flex;
    margin-top: 20px;

    span {
      line-height: 36px;
      text-align: center;
      margin-right: 10px;
    }

    .date {
      margin-right: 20px;
    }
  }
}

//@keyframes anima {
//  0% {
//    height: 36px
//  }
//  70% {
//    height: 221px
//  }
//  100% {
//    height: auto
//  }
//}
</style>
